import React, { Component } from 'react';
import { getPersonalizedNewsong } from '../../../api/discovery';
import { createFromIconfontCN } from '@ant-design/icons';
import { iconUrl } from '../../../utlis/icons';
import { getM3pId } from '../../../api/videoMp3Id'
import './newest.less';
const IconFont = createFromIconfontCN({
  scriptUrl: iconUrl
});


export default class index extends Component {

  constructor() {
    super()
    this.state = {
      // 推荐音乐数据
      Newsong: []
    }
  }

  componentDidMount() {
    this.getPersonalizedNewsongData();
  }

  async getPersonalizedNewsongData() {
    const { data } = await getPersonalizedNewsong();
    this.setState({
      Newsong: data.result
    })
    // console.log(data.result);
  }

  // 向父组件发送音乐id
  lickPropId = async (id) => {
    const { data } = await getM3pId(id)
    this.props.lickchnd(data.data[0].url)
  }

  render() {
    return (
      <div>
        <h3 style={{ padding: 20, margin: 0,fontSize: 14 }}>最新音乐</h3>
        <div className="items-newest">
          {
            this.state.Newsong.map((v, i) => {
              return <div className="item-newest" key={v.id}>
                {/* 点击向父组件传递音乐id */}
                <div className="img-warp" onClick={this.lickPropId.bind(this, v.id)}>
                  <img src={v.picUrl} alt="" />
                  <span className="sp">
                    <IconFont type="iconbofang6" />
                  </span>
                </div>
                <div className="song-warp">
                  <div className="song-name">{v.name}</div>
                  <div className="singer">{v.song.artists[0].name}</div>
                </div>
              </div>
            })
          }

        </div>
      </div>
    )
  }
}
